
<template>
  <div>
    <div id="map" ref="map"></div>
    <span id="gif-0"></span>
    <span id="gif-1"></span>
    <span id="gif-2"></span>
  </div>
</template>

<script>
import "ol/ol.css";
import { Map, View } from "ol";
import TileLayer from "ol/layer/Tile";
import OSM from "ol/source/OSM";
import Overlay from "ol/Overlay";
import { fromLonLat } from "ol/proj";

import { nextTick, onMounted, ref } from "vue";


export default {
  name: "shadow",
  setup() {
    let coordinates = [
      [87.532236, 44.284182],
      [104.043505, 30.58165],
      [116.397289, 39.928632]
    ];
    let map = ref(null);
    let mapObj = null;
    const initMap = () => {
      let target = "map";
      let tileLayer = new TileLayer({
        source: new OSM()
      });
      let view = new View({
        center: fromLonLat([104.912777, 34.730746]),
        zoom: 4.5
      });
      mapObj = new Map({
        target: target,
        layers: [tileLayer],
        view: view
      });
    }
    let markerPoint = null;
    const addGif = () => {
      let mapDom = map.value;
      console.log(mapDom)
      for (let i = 0; i < coordinates.length; i++) {
        // var oDiv = document.createElement("span");
        // oDiv.id = "gif-" + i;
        // console.log("span", oDiv)
        // mapDom.appendChild(oDiv);
        nextTick(() => {
          markerPoint = new Overlay({
            position: fromLonLat([
              coordinates[i][0],
              coordinates[i][1]
            ]),
            positioning: "center-center",
            element: document.getElementById("gif-" + i),
            stopEvent: false
          });
          mapObj.addOverlay(markerPoint);
        });
      }

      console.log("after", mapDom)
    }

    onMounted(() => {
      initMap();
      addGif();
    })

    return {
      map
    }
  }
};
</script>

<style lang='scss' scoped>
#map {
  height: 90vh;
}

.ol-overlay-container {
  span {
    display: block;
    width: 20px;
    height: 42px;
    border-radius: 50%;
    background: url("../assets/123.gif") no-repeat;
    background-size: 20px 42px;
  }
}
</style>
